<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="加载user" onclick="loadUser()">
    <input type="button" value="加载user-async" onclick="loadUser2()">
    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        function loadUser() {
            let xhr = new XMLHttpRequest();
            /*   xhr.open(method,url,async)
                  method:http请求类型：get、post、put、delete等http请求类型
                  url:请求地址
                  async：是否启用异步模式，默认为true */

            xhr.open("get", "/user");
            // xhr.open("post","/user");
            // xhr.open("delete","/user");
            // xhr.open("put","/user");
            // xhr.open("aaaa","/user");//报错，400 (Bad Request)，无效请求（请求配置或者参数存在问题）
            // xhr.open("get","/useraaa");//404 (Not Found)
            // xhr.open("get","/serviceError");//500 (Internal Server Error)服务器代码异常，5XX一般都是服务器错误，多数不需要前端处理(ajax请求代码是正确的)


            //注意：监听方法在程序中，应该定义在发送请求的上面，才能保证请求发送时候一定有监控
            xhr.onload = function () {
                console.log(xhr.responseText);
            };
            xhr.send();
        }

        function loadUser2() {
            /*  
            ajax的最重要的放大特性是异步请求，但是ajax也能够发送同步请求(不刷新页面的同步请求，ajax的同步请求主要说的是js代码的同步)
             xhr.open(method,url,async)
                 method:http请求类型：get、post、put、delete等http请求类型
                 url:请求地址
                 async：是否启用异步模式，默认为true
                         true异步模式
                             1.页面不重新加载
                             2.js的代码为异步模式，响应结果必须通过监控请求完成的回调进行获取
                             3.异步ajax不会中断当前页面的其他操作
                         false同步模式
                             1.页面不重新加载
                             2.js的代码为同步模式，响应结果的获取在send方法之后定义，js代码会等待请求完成
                             3.同步ajax会中断当前页面的其他操作(页面处于假死状态)
 
             */


            // let xhr = new XMLHttpRequest();
            // xhr.open("get", "/userAsync",false);//同步执行
            // xhr.send();
            // console.log(xhr.responseText);

            let xhr = new XMLHttpRequest();
            xhr.open("get", "/userAsync",true);//异步执行
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
           

            


        }
    </script>
</body>

</html>